<template>
	<view class="wrap">
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">{{pageName}}</block>
		</cu-custom>
		<view class="sherch" v-if="!classify">
			<template>
				<u-input class="m-10" v-model="value" :type="type" :border="border" :height="height"
					:auto-height="autoHeight" />
			</template>
			<u-button type="success" size="mini" plain class="m-10 mt-2" @click="search()">搜索</u-button>
			<u-button type="success" size="mini" plain class="m-10 mt-2" @click="reset()">重置</u-button>
		</view>
		<u-cell-group v-show="classify">
			<u-cell-item :title="item.detailTypeTitle" :value="'共 '+item.count+' 种'"
				v-for="(item) in classifyList" :key="item" @click="showLocality(item.detailType)">
			</u-cell-item>
		</u-cell-group>

		<view class="mian" v-if="!(type==3)&&(!classify)">
			<view class="demo-warter w-50" v-for="(item) in InfoList" :key="item.specyId"
				@click="goDtil(item.specyId)">
				<!-- 警告：微信小程序中需要hx2.8.11版本才支持在template中结合其他组件，比如下方的lazy-load组件 -->
				<u-lazy-load v-show="item.specyImage" threshold="-450" border-radius="10"
					:image="'https://xcx.includesteven.top'+item.specyImage" :index="item.specyId">
				</u-lazy-load>
				<u-lazy-load v-show="!item.specyImage" threshold="-450" border-radius="10" :image="imagedf"
					style="height: 100rpx;" :index="item.specyId">
				</u-lazy-load>
				<view class="demo-title">
					{{item.specyName}}
				</view>
				<view class="demo-tag">
					<view class="demo-tag-owner shl">
						{{item.specyFamily}}
					</view>
					<view class="demo-tag-text shl">
						{{item.specyGenus}}
					</view>
				</view>
				<view v-if="item.sourceArea" class="demo-shop">
					原产地：{{item.sourceArea}}
				</view>
				<view v-if="!item.sourceArea" class="demo-shop">
					原产地：暂无数据
				</view>
				<!-- <u-icon name="close-circle-fill" color="#fa3534" size="34" class="u-close" @click="remove(item.id)"></u-icon> -->
			</view>
		</view>

		<view class="mian" v-if="type==3">
			<view class="demo-warter w-50" v-for="(item) in InfoList" :key="item.preventionId"
				@click="goDtil(item.preventionId)">
				<!-- 警告：微信小程序中需要hx2.8.11版本才支持在template中结合其他组件，比如下方的lazy-load组件 -->
				<u-lazy-load v-show="item.harmImage" threshold="-450" border-radius="10"
					:image="'https://xcx.includesteven.top'+item.harmImage" :index="item.preventionId">
					
				</u-lazy-load>
				<u-lazy-load v-show="!item.harmImage" threshold="-450" border-radius="10" :image="imagedf"
					:index="item.preventionId">
				</u-lazy-load>
				<view class="demo-title">
					{{item.specyName}}
				</view>
				<view v-if="item.preventionId" class="demo-shop">
					防控ID：{{item.preventionId}}
				</view>
				<view v-if="!item.preventionId" class="demo-shop">
					防控ID：暂无数据
				</view>
				<!-- <u-icon name="close-circle-fill" color="#fa3534" size="34" class="u-close" @click="remove(item.id)"></u-icon> -->
			</view>
		</view>
	</view>
</template>

<script>
	import proData from "@/common/projectData.js";
	import imgData from "@/common/uiImg.js";

	import {
		getAnimalInfo,
		getAnimalDtil,
		getPlantInfo,
		getPlantDtil,
		getMicrobeInfo,
		getMicrobeIDtil,
		getpreventionInfo,
		getpreventionDtil,
		getSpecyInfoList,
		getInfoByName,
		getpreventionInfoByName,
		getClassify
	} from '../common/api/info.js'
	export default {
		components: {},
		data() {
			return {
				classify: true,
				classifyList: [],
				detailType: 0,
				value: '',
				type: 'textarea',
				border: true,
				height: 60,
				autoHeight: true,
				placeholder: '请输入搜索内容',
				pageName: '',
				listBar: [
					''
				],
				imagedf: '',
				loadStatus: 'loadmore',
				flowList: [],
				list: null,
				specyimg: '',
				InfoList: [],
				queryParams: {
					pageNum: 1,
					pageSize: 10
				},
				totalPageSize: 1,
				type: '',
				params: {
					specyName: null
				},
				// 设定为无触底加载状态
				canMore: true
			}
		},
		onLoad(option) {
			
			this.type = option.type;
			if (option.type == 0) {
				this.pageName = '植物物种信息';
				this.imagedf =
					"https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1274304873,2136522871&fm=26&gp=0.jpg";
			} else if (option.type == 1) {
				this.pageName = '动物物种信息';
				this.imagedf =
					"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=544169164,1388607622&fm=26&gp=0.jpg";
			} else if (option.type == 2) {
				this.pageName = '微生物物种信息';
				this.imagedf =
					"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=923983056,1720207121&fm=26&gp=0.jpg";
			} else if (option.type == 3) {
				this.pageName = '防控信息';
				this.imagedf = "https://iph.href.lu/250x250?text=防控图片";
				this.classify = false
				getpreventionInfo(this.queryParams).then(response => {
					console.log(response);
					this.InfoList = response[1].data.rows;
					console.log(this.InfoList)
				});
				return;
			}
			const microbeList = ["未知", "细菌", "真菌", "病毒"]
			const animalList = ["未知", "脊椎动物", "无脊椎动物"]
			const plantList = ["未知等级植物", "恶性入侵植物", "严重入侵植物", "局部入侵植物", "一般入侵植物", "有待观察植物", "建议排除植物", "中国原产植物"]
			let tempList = [plantList, animalList, microbeList]
			getClassify(parseInt(this.type) + 1).then(res => {
				console.log(res[1])
				this.classifyList = res[1].data.data
				for (let i in this.classifyList) {
					this.classifyList[i].detailTypeTitle = tempList[parseInt(this.type)][this.classifyList[i]
						.detailType
					]
				}
			})


		},
		onReachBottom() {
			uni.showLoading({
				title: "加载中"
			});
			if (!this.canMore) {
				uni.hideLoading()
				return;
			}
			if (this.totalPageSize <= this.queryParams.pageNum) {
				uni.hideLoading()
				return;
			}
			this.loadStatus = 'loading';
			// 模拟数据加载
			this.queryParams.pageNum = this.queryParams.pageNum + 1

			this.addRandomData();
			this.loadStatus = 'loadmore';
		},
		methods: {
			showLocality(index) {
				this.detailType = index
				this.classify = false

				this.addRandomData();
			},
			reset() {
				this.InfoList = []
				this.value = ''
				this.queryParams = {
					pageNum: 1,
					pageSize: 10
				}
				this.addRandomData()
				this.canMore = true
			},
			addRandomData() {
				this.queryParams.specyType = parseInt(this.type) + 1
				if (this.type == 3) {
					getpreventionInfo(this.queryParams).then(response => {
						console.log(response);
						this.InfoList = response[1].data.rows;
						return;
					});
				}
				this.queryParams.detailType = this.detailType
				getSpecyInfoList(this.queryParams).then(res => {
					this.InfoList = this.InfoList.concat(res[1].data.rows)
					// console.log(this.InfoList);
					this.totalPageSize = Math.ceil(parseInt(res[1].data.total) / this.queryParams.pageSize);
					// console.log(this.totalPageSize);
					uni.hideLoading()
				})
			},
			goDtil(id) {
				if (this.type == 0) {
					uni.navigateTo({
						url: '/pages/info/plant?specyId=' + id
					})
				} else if (this.type == 1) {
					uni.navigateTo({
						url: '/pages/info/animal?specyId=' + id
					})
				} else if (this.type == 2) {
					uni.navigateTo({
						url: '/pages/info/mini?specyId=' + id
					})
				} else if (this.type == 3) {
					uni.navigateTo({
						url: '/pages/info/preve?preventionId=' + id
					})
				}
				console.log(id);
			},
			search() {
				this.canMore = false
				let specyName = this.value;

				if (this.type != 3) {
					let value = {
						specyName,
						specyType: parseInt(this.type) + 1
					};
					getSpecyInfoList(value).then(response => {
						console.log(response);
						this.InfoList = response[1].data.rows;
					});
					return;
				}

				getpreventionInfoByName(this.value).then(response => {
					console.log(response);
					this.InfoList = response[1].data.rows;
				})


			},
			seeImg(id) {
				console.log(id);
			}
		}
	}
</script>

<style>
	/* page不能写带scope的style标签中，否则无效 */
	page {
		background-color: #fff;
	}
</style>

<style lang="scss" scoped>
	* {
		background-color: #fff;
	}

	.shl {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.show-overflow-tooltip {
		padding: 10px;
		height: 40px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.p-10 {
		padding: 10px;
	}

	.prl-5 {
		padding: 10px 13px;
	}

	.sherch {

		display: flex;
	}

	.m-10 {
		margin: 10px;
	}

	.mt-2 {
		margin-top: 14px;
	}

	.demo-warter {
		border-radius: 8px;
		margin: 10px 5px;
		background-color: #ffffff;
		padding: 8px;
		position: relative;
		border: 1px solid #ddd;
	}

	.u-close {
		position: absolute;
		top: 32rpx;
		right: 32rpx;
	}

	.demo-image {
		width: 100%;
		border-radius: 4px;
	}

	.demo-title {
		font-size: 30rpx;
		margin-top: 5px;
		color: $u-main-color;
	}

	.demo-tag {
		display: flex;
		margin-top: 5px;
	}

	.demo-tag-owner {
		background-color: $u-type-success;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		padding: 4rpx 14rpx;
		border-radius: 50rpx;
		font-size: 20rpx;
		line-height: 1;
	}

	.demo-tag-text {
		border: 1px solid $u-type-success;
		color: $u-type-success;
		margin-left: 10px;
		border-radius: 50rpx;
		line-height: 1;
		padding: 4rpx 14rpx;
		display: flex;
		align-items: center;
		border-radius: 50rpx;
		font-size: 20rpx;
	}

	.demo-shop {
		font-size: 22rpx;
		color: $u-tips-color;
		margin-top: 5px;
	}

	.mian {
		width: 120%;
		display: flex;
		flex-wrap: wrap;
		padding-left: 10px;
	}

	.w-50 {
		width: 38%;
	}
</style>
